<template>
	<view>
		<u-navbar title="云课堂"></u-navbar>
		<tui-search :search="keyword" @searchEmit="searchEmitHandler"></tui-search>
		<view class="u-p-t-10">
			<view class="u-flex u-row-between card-box" v-for="(item,index) in list" @click="goDetail(item)">
				<view style="width: 220rpx;">
					<image class="card-box-img" :src="item.imgUrl"
						style="width: 210rpx;height: 130rpx;" mode="aspectFill"></image>
				</view>
				<view class="u-flex-1 u-m-l-15">
					<view class="">
						<view class="card-box-title"><text v-if="item.lessonLable">【{{item.lessonLable}}】</text>{{item.lessonName}}</view>
					</view>
					<view class="u-m-t-20">
						<view class="card-box-footer u-flex u-row-between">
							<view class="u-flex">
								<image v-for="item in 5" src="../../static/home/star-full@2x.png" style="width: 18rpx;"
									mode="widthFix"></image>
							</view>
							<view>
								<u-icon name="eye-fill" size="24" :label="item.broadcastNumber || 0" label-size="24" label-color="#8C8C8C" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiSearch from '../../components/tui-search/tui-search.vue';
	export default {
		components: {
			tuiSearch
		},
		data() {
			return {
				keyword: '',
				yunUrl: 'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/',
				list: []
			}
		},
		onLoad(option) {
			this.keyword = option.search
			this.getLessonListByCondition()
		},
		methods: {
			getLessonListByCondition() {
				let obj = Object.assign({});
				obj.lessonName = this.keyword
				obj.lessonStatus = 0
				this.$http.getLessonListByCondition(obj).then(res => {
					console.log(res)
					this.list = res.data.map(item => {
						item.imgUrl = this.yunUrl + item.picture
						return item
					});
				})
			},
			//获取课程列表
			getLessonListByCondition() {
				let obj = Object.assign({});
				obj.lessonName = this.keyword
				obj.lessonStatus = 0
				this.$http.getLessonListByCondition(obj).then(res => {
					console.log(res)
					this.list = res.data.map(item => {
						item.imgUrl = this.yunUrl + item.picture
						return item
					});
				})
			},
			goDetail(data){
				console.log(data)
				uni.navigateTo({
					url:'../course/detail/detail?id='+data.lessonId
				})
			},
			searchEmitHandler(data) {
				console.log(data)
				this.keyword = data
				this.getLessonListByCondition()
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.card-box {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.card-box-img {
		width: 210rpx;
		height: 130rpx;
	}

	.card-box-title {
		font-size: 28rpx;
		font-weight: bold;
		color: $default-font-color;
	}

	.card-box-account {
		font-size: 22rpx;
		color: #BFBFBF;
	}

	.card-box-footer {
		font-size: 24rpx;
		color: #8C8C8C;
	}
</style>
